/* 顶部通栏的样式 */
.top-nav {
  /* 行高 */
  line-height: 29px;
  background-color: #e3e4e5;
  font-size: 12px;
  color: #999;
}

.top-nav ul li {
  padding: 0 5px;
  border: 1px solid transparent;
}

.top-nav .select-container {
  border: 0 none;
  padding: 0;
}

.top-nav .select-container .select-border {
  border: 1px solid transparent;
  padding: 0 5px;
}

.top-nav ul li {
  margin: 0 5px;
  position: relative;
}

.top-nav ul.top-right li::after {
  content: '';
  position: absolute;
  height: 8px;
  width: 1px;
  background: #999;
  top: 11px;
  right: -5px;
}

.top-nav ul.top-right li:last-of-type::after {
  display: none;
}

.top-nav .select-container .select-border {
  position: relative;
}

.top-nav .select-container .select-border .iconfont,
.top-nav .menu.select-container .select-border .icon-box {
  position: absolute;
  top: 50%;
  /* Y轴平移 */
  transform: translateY(-50%);
}

.top-nav .location.select-container .select-border {
  padding-left: 26px;
}

.top-nav .location.select-container .select-border .iconfont {
  left: 6px;
  color: #f10215;
}

.top-nav .menu.select-container .select-border {
  padding-right: 20px;
}

.top-nav .menu.select-container .select-border .iconfont {
  right: 6px;
  font-size: 10px;
  font-weight: 1000;
}

/* 用于缩放icon图标的盒子 */
.top-nav .menu.select-container .select-border .icon-box {
  /* 转化：Y轴平移 缩放 */
  transform: translateY(-50%) scale(0.5);
  right: 6px;
}

.top-nav .active {
  color: #f10215;
}

.top-nav .resigen {
  margin-left: 5px;
}

.top-nav .select-container .select-content {
  position: absolute;
  width: 200%;
  height: 200%;
  background-color: #fff;
  border: 1px solid #ccc;
  left: 0;
  bottom: 0px;
  transform: translateY(100%);
  z-index: 1;
  display: none;
}

.top-nav .select-container .select-border::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: -2px;
  z-index: 2;
  display: none;
}

.top-nav .select-container:hover .select-border {
  border-color: #ccc;
  border-bottom-color: transparent;
}

.top-nav .select-container:hover .select-border::after,
.top-nav .select-container:hover .select-content {
  display: block;
}

.search-container .w {
  padding: 10px 0;
}

.search-container .w .logo a,
.search-container .w .shuang11 a {
  display: block;
  width: 190px;
  height: 120px;
  background: url(https://img10.360buyimg.com/img/jfs/t1/199023/6/37257/12539/65361a20F9cac6be6/80afe4b365931a5d.jpg)
    center center / 190px no-repeat;
}

.search-container .w .shuang11 a {
  background-image: url(https://img20.360buyimg.com/babel/jfs/t20261026/179460/11/40748/83788/653bd646Fc486b0b4/a68f94af9a970a0c.png.avif);
}

.search-container .w .serach {
  margin-left: 10px;
}

.search-container .w .serach .search-car {
  padding-left: 50px;
  padding-top: 20px;
}

.search-container .w .serach .search-car .search-box {
  position: relative;
}

.search-container .w .serach .search-car .search-box input {
  width: 425px;
  height: 28px;
  border: 2px solid #f10215;
  padding: 2px 44px 2px 17px;
}

.search-container .w .serach .search-car .search-box .icon-xiangji {
  position: absolute;
  top: 8px;
  left: 458px;
  font-size: 18px;
  font-weight: bold;
  color: #999;
}

.search-container .w .serach .search-car .search-box button {
  width: 62px;
  height: 36px;
  border: 0 none;
  background-color: #f10215;
}

.search-container .w .serach .search-car .search-box .icon-sousuo {
  color: #fff;
}

.search-container .w .serach .search-car .search-box .car {
  position: relative;
  width: 130px;
  margin-left: 20px;
  border: 1px solid #e3e4e5;
  text-align: center;
  line-height: 34px;
  color: #f10215;
  font-size: 14px;
}

.search-container .w .serach .search-car .search-box .car .iconfont {
  font-size: 14px;
  position: relative;
  margin-right: 12px;
}

.search-container .w .serach .search-car .search-box .car .iconfont span {
  position: absolute;
  padding: 1px 3px;
  background-color: #f10215;
  color: #fff;
  line-height: 1;
  font-size: 10px;
  border-radius: 50%;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

/**/
.search-container .w .serach .search-car .search-box .car .car-select {
  width: 308px;
  height: 200%;
  background-color: #fff;
  position: absolute;
  right: -1px;
  bottom: -1px;
  transform: translateY(100%);
  border: 1px solid #f10215;
  z-index: 1;
  display: none;
}

.search-container .w .serach .search-car .search-box .car::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  bottom: -2px;
  left: 0;
  z-index: 2;
  display: none;
}

.search-container .w .serach .search-car .search-box .car:hover {
  border-color: #f10215;
  border-bottom-color: transparent;
}

.search-container .w .serach .search-car .search-box .car:hover .car-select,
.search-container .w .serach .search-car .search-box .car:hover::after {
  display: block;
}

.search-container .w .serach .search-car .search-nav {
  line-height: 2;
  font-size: 12px;
}

.search-container .w .serach .search-car .search-nav li {
  margin-right: 10px;
  color: #999;
}

.search-container .w .serach .goods-nav {
  margin-top: 20px;
  font-size: 15px;
}

.search-container .w .serach .goods-nav li {
  margin-right: 22px;
}

.content {
  background: #f4f4f4
    url(https://img11.360buyimg.com/babel/jfs/t1/187826/40/39963/367447/653f9f5cF4981fde5/13cd68303f3f1adf.png.avif)
    50% 10px no-repeat;
  padding-top: 10px;
}

.content .menu {
  padding: 10px 0;
  padding-left: 18px;
  line-height: 25px;
  font-size: 14px;
  background-color: #fff;
}

.content .goods-menu .menu li {
  width: 172px;
}

.content .goods-menu > div {
  margin-left: 10px;
  height: 470px;
}

.content .goods-menu .swiper {
  width: 590px;
}

.content .goods-menu .table-swipei {
  width: 190px;
}

.content .goods-menu .user {
  width: 190px;
  background-color: #fff;
}

.content .goods-menu .user .portraiture {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 10px;
  background: url(https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png)
    center center / 40px no-repeat;
}

.content .goods-menu .user .welcome {
  font-size: 14px;
  line-height: 2;
  text-align: center;
  margin-bottom: 5px;
}

.content .goods-menu .user .vip {
  background: #e0e8fb;
  padding: 6px 15px 6px 8px;
  font-size: 12px;
  margin: 0 10px;
  margin-bottom: 10px;
}

.content .goods-menu .user .vip .grade {
  font-size: 14px;
  font-weight: bold;
}

.content .goods-menu .user .vip.plus {
  background: linear-gradient(90deg, #fff4d2, #ffecb6);
}

.content .goods-menu .user .grid-icon {
  padding-top: 5px;
}

.content .goods-menu .user .grid-icon img {
  display: block;
  width: 100%;
}

.content .goods-menu .user .information {
  padding: 0 10px;
  font-size: 12px;
  margin-top: 10px;
}

.content .goods-menu .user .information {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.content .goods-menu .user .information strong {
  font-weight: normal;
  padding: 0 5px;
  background-color: rgba(255, 0, 0, 0.2);
  color: #f10215;
}

.content .flash {
  margin: 30px 0;
}

.content .flash img {
  display: block;
  width: 100%;
}

.content .stroll {
  background: url(https://img13.360buyimg.com/babel/s1270x555_jfs/t1/206679/3/36337/212380/653bdb56F00a5b4c0/f6356f7f3842a344.png!cc_1270x555.avif)
    center center / 99% no-repeat;
  margin: 0 -50px;
  padding: 108px 50px;
  padding-bottom: 0;
}

.content .stroll li {
  width: 185px;
  height: 210px;
  margin: 0 15px 15px 0;
}

.content .stroll li:nth-child(6n) {
  margin-right: 0;
}

.content .stroll li img {
  display: block;
  width: 100%;
}

.content .title {
  margin: 20px 0;
  font-size: 28px;
  line-height: 45px;
  text-align: center;
  position: relative;
}

.content .title::before,
.content .title::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 20px;
  background: url(https://storage.360buyimg.com/channel2022/jd_home/0.0.38/assets/sprite/floor_hd/sprite.png)
    top left / 50px no-repeat;
  top: 50%;
}

.content .title::before {
  left: calc(50% - 3em);
  transform: translate(-50%, -50%);
}

.content .title::after {
  left: calc(50% + 3em);
  transform: translate(-50%, -50%);
  background-position: top right;
}

.content .channel .channel-content li {
  width: 290px;
  margin: 0 10px 10px 0;
  float: left;
  background-color: #fff;
}

.content .channel .channel-content li:nth-child(4),
.content .channel .channel-content li:nth-child(6),
.content .channel .channel-content li:nth-child(10) {
  margin-right: 0;
}

.content .channel .channel-content .large {
  height: 370px;
}
.content .channel .channel-content .small {
  height: 180px;
  padding: 17px 10px 0 30px;
  box-sizing: border-box;
}

.content .channel .channel-content .small div {
  width: 50%;
}

.content .channel .channel-content .small div h1 {
  font-size: 22px;
}
.content .channel .channel-content .small div p {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
.content .channel .channel-content .small div img {
  display: block;
  width: 100px;
}

.recommend-content {
  height: 100vh;
}

.lift {
  position: fixed;
  left: calc(50% + 615px);
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  z-index: 55;
}

.lift li a {
  display: block;
  padding: 15px;
  width: 2em;
  height: 2em;
  line-height: 1.3;
  color: #333;
}

.lift li {
  /* 下边框 */
  /* transparent 透明色 */
  border-bottom: 1px solid transparent;
  /* 边框图片 */
  /* linear-gradient 渐变 */
  border-image: linear-gradient(to right, transparent 15%, rgba(0, 0, 0, 0.2), transparent 85%) 1 5;
}

.lift li p {
  text-align: center;
  line-height: 1.3;
}

.lift li p:first-child {
  transform: rotate(180deg);
}

.lift li:last-child {
  height: auto;
  border-bottom: 0 none;
}

.lift li:nth-child(2) a {
  background: url(https://m.360buyimg.com/babel/jfs/t20261022/236442/6/420/2728/6535da5fFd95681a8/33b1e5d98eccf2e1.png)
    center center / 100% no-repeat;
}

.lift li:hover {
  background-color: #f10215;
}

.lift li:nth-child(2):hover a {
  /* 背景图片的资源 */
  background-image: url(https://m.360buyimg.com/babel/jfs/t20261022/188557/27/39637/2722/6535da62F6844b89e/1ab3bfe71a6950b7.png);
}
